<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汽车出行</title>
    <link rel="stylesheet" type="text/css" href="../static/css/header.css"/>
</head>
<style>
    html,
    body,
    #container {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div class="app">
    <!--    导航栏开始  -->
    <div class="header">
        <div class="header-inner">
            <ul class="header_left">
                <li class="logo">
                    汽车出行
                </li>
                <li></li>
            </ul>
            <div class="header_right">
                <ul role="menubar" class="el-menu-demo"
                    style="background-color: rgb(24, 27, 44);">
                    <li  tabindex="0" class="el-menu-item is-active"
                        style="color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); background-color: rgb(24, 27, 44); ">
                        概览
                    </li>
                    <li  tabindex="0" class="el-menu-item"
                        style="color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); background-color: rgb(24, 27, 44);">
                        订单监控
                    </li>
                    <li  tabindex="0" class="el-menu-item"
                        style="color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); background-color: rgb(24, 27, 44);">
                        轨迹监控
                    </li>
                    <li  tabindex="0" class="el-menu-item"
                        style="color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); background-color: rgb(24, 27, 44);">
                        虚拟车站
                    </li>
                    <li  tabindex="0" class="el-menu-item"
                        style="color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); background-color: rgb(24, 27, 44);">
                        出行迁途
                    </li>
                    <li  tabindex="0" class="el-menu-item"
                        style="color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); background-color: rgb(24, 27, 44);">
                        用户数据
                    </li>
                    <li  tabindex="0" class="el-menu-item"
                        style="color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); background-color: rgb(24, 27, 44);">
                        热力图
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--    导航栏结束  -->
    <div id="map_container" class="map_container" style="width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;">
        <div class="left">
            <div class="order_info">
                <h2 class="dingdangk">订单概况</h2>
                <ul>
                    <li><i class="el-icon-document"></i>订单总数: 0</li>
                    <li><i class="el-icon-user-solid"></i>乘车人数: 0</li>
                    <li><i class="el-icon-location"></i>累计轨迹点数: 1032</li>
                </ul>
            </div>

        </div>
    </div>
</div>
</body>
<script src="//webapi.amap.com/maps?v=1.4.15&key=2dcd5f3b01d7415070246a87f562554a"></script>
<script src="https://a.amap.com/Loca/static/mock/wjarea.js"></script>
<script>
    var map = new AMap.Map('map_container', {
        mapStyle: 'amap://styles/darkblue',
        resizeEnable: true,
        zoom:11,
        center: [112.549717,37.87046]//默认的地图中心经纬度
    });

</script>
</html>